<template>
	<view>
		<u-popup
			v-model="show"
			mode="center"
			:mask="true"
			:popup="false"
			:closeable="false"
			:maskCloseAble="false"
			:safeAreaInsetBottom="true"
			:z-index="zIndex"
			:borderRadius="20"
			close-icon-color="#2B85E4"
			@close="success"
		>
			<!-- 用户登录页面 -->
			<view class="u-p-20" v-if="mode == 'login'">
				<view class="u-p-10 u-flex">
					<view class="m-inline-block u-flex-1">账号登录</view>
					<view class="m-inline-block" @click="mode = 'register'">去注册</view>
				</view>
				<view class="u-p-40 u-m-t-40 u-text-center" style="width:80vw;">
					<u-form :model="form">
						<u-field class="u-m-b-20" maxlength="11" v-model="form.phone" label="登录手机" required placeholder="请填写登录手机"></u-field>
						<u-field class="u-m-b-20" maxlength="50" v-model="form.password" label="登录密码" required placeholder="请填写登录密码"></u-field>
					</u-form>
					<button type="primary" class="u-m-t-40" @click="doRequestLogin()">登 录</button>
				</view>
			</view>

			<!-- 用户注册页面 -->
			<view class="u-p-20" v-if="mode == 'register'">
				<view class="u-p-10 u-flex">
					<view class="m-inline-block u-flex-1">账号登录</view>
					<view class="m-inline-block" @click="mode = 'login'">去登录</view>
				</view>
				<view class="u-p-40 u-m-t-40 u-text-center" style="width:80vw;">
					<u-form :model="form">
						<u-field class="u-m-b-20" maxlength="11" v-model="form.phone" label="登录手机" required placeholder="请填写登录手机"></u-field>
						<u-field class="u-m-b-20" maxlength="50" v-model="form.password" label="登录密码" required placeholder="请填写登录密码"></u-field>
					</u-form>
					<button type="primary" class="u-m-t-40" @click="doRequestRegister()">注 册</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * m-login-wxapp 小程序登录组件
 * @property {string} success 成功后返回的数据
 * @property {String} z-index 弹出时的z-index值
 */
export default {
	name: 'm-login-mobile',
	props: {
		zIndex: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			user: {},
			form: {},
			mode: 'login',
			show: false,
			reject: null,
			resolve: null
		};
	},
	methods: {
		// 本地用户数据
		local() {
			return new Promise((resolve, reject) => {
				this.reject = reject;
				this.resolve = resolve;
				this.$u.login.local().then(
					// 本地登录成功
					user => {
						this.user = this.$u.login.update(user);
						this.success();
					},
					// 本地登录失败
					() => {
						this.user = {};
						this.show = true;
					}
				);
			});
		},
		// 重载用户数据
		reload() {
			return new Promise((resolve, reject) => {
				this.reject = reject;
				this.resolve = resolve;
				this.$u.login.reload().then(
					user => {
						this.user = this.$u.login.update(user);
						this.success();
					},
					() => {
						this.user = {};
						this.show = true;
					}
				);
			});
		},
		// 登录成功返回
		success() {
			this.show = false;
			this.resolve(this.user);
			this.$emit('success', this.user);
		},
		// 执行用户登录
		doRequestLogin() {
			this.$u.post('data/api.login/in', this.form).then(ret => {
				if (ret.code > 0) {
					this.form = {};
					this.user = this.$u.login.update(ret.data);
					this.success();
				} else {
					this.$u.message.toast(ret.info);
				}
			});
		},
		// 执行用户注册
		doRequestRegister() {
			this.$u.post('data/api.login/register', this.form).then(ret => {
				if (ret.code > 0) {
					this.form = {};
					this.user = this.$u.login.update(ret.data);
					this.success();
				} else {
					this.$u.message.toast(ret.info);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
